<template>
	<view class="msg-item" :class="{'self':userID == msgData.from}">
		<!-- 文本消息 -->
		<view class="msg-container type-string" v-if="msgType=='string' && stringData">
			<avatar></avatar>
			<view class="content">{{stringData}}</view>
			<view class="status" v-if="msgData.sending || msgData.sendFail">
				<u-icon v-if="msgData.sendFail" color="red" size="44" name="info-circle-fill" @tap="$emit('msgItemTap','MSG_FAIL',msgData)"/>
				<u-loading v-if="msgData.sending" mode="circle" />
			</view>
		</view>
		
		<view class="msg-container type-answer" v-if="msgType=='answer' && answerData">
			<avatar></avatar>
			<view class="content" style="overflow-x:scroll;">
				<view v-for="(item,index) in answerData" :key="index">
					<text v-if="item.type=='txt'">{{item.content}}</text>
					<view v-if="item.type=='img'" class="answerImg">
						<image :src="item.content" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 待选列表消息 -->
		<view class="msg-container type-list" v-if="msgType=='list' && listData">
			<avatar></avatar>
			<view class="content">
				<view class="list-box">
					<view class="tit">{{msgData.payload.extension}}</view>
					<view class="item" v-for="(item,index) in listData" :key='index' @tap="$emit('msgItemTap','LIST_ITEM',item)">{{item.question}}</view>
				</view>
			</view>
		</view>
		<!-- 案例推荐消息 -->
		<view class="msg-container type-case" v-if="msgType=='case' && caseData">
			<avatar></avatar>
			<view class="content" @tap="$emit('msgItemTap','CASE',caseData)">
				<view class="caseItem">
					<view class="cell_1">{{caseData.title}}</view>
					<view class="cell_2">
						<text>{{caseData.area}} &sup2;</text>
						<text>|</text>
						<text>{{caseData.house_type}}</text>
						<text>|</text>
						<text>{{caseData.design_style.name}}</text>
					</view>
					<view class="cell_3">
						<image :src="caseData.display_cover"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品推荐消息 -->
		<view class="msg-container type-goods" v-if="msgType=='goods'&&goodsData">
			<avatar></avatar>
			<view class="content" @tap="$emit('msgItemTap','GOODS',goodsData)">
				<view class="shopBox">
					<view class="shopImg">
						<image v-if="goodsData.main_imgurl" :src="goodsData.main_imgurl"></image>
					</view>
					<view class="cell">
						<text class="row1">{{goodsData.product_title}}</text>
						<text class="row2">￥ {{goodsData.price}}</text>
					</view>
				</view>
			</view>
			<view class="status" v-if="msgData.sending || msgData.sendFail">
				<u-icon v-if="msgData.sendFail" color="red" size="44" name="info-circle-fill" @tap="$emit('msgItemTap','MSG_FAIL',msgData)"/>
				<u-loading v-if="msgData.sending" mode="circle" />
			</view>
		</view>
		<!-- 图片消息 -->
		<view class="msg-container type-picture" v-if="msgType=='picture'">
			<avatar></avatar>
			<view class="content">
				<image class="img" :src="pictureData[1].url" :style="{height:imageStyle(pictureData,'h'),width:imageStyle(pictureData,'w')}"></image>
			</view>
			<view class="status" v-if="msgData.sending || msgData.sendFail">
				<u-icon v-if="msgData.sendFail" color="red" size="44" name="info-circle-fill" @tap="$emit('msgItemTap','IMG_FAIL',msgData)"/>
				<u-loading v-if="msgData.sending" mode="circle" />
			</view>
		</view>
		
		<view class="msg-container type-store" v-if="msgType=='store'&&storeData">
			<avatar></avatar>
			<view class="content" @tap="$emit('msgItemTap','STORE',storeData)">
				<view class="shopBox">
					<view class="shopImg">
						<image :src="storeData.store_logo"></image>
					</view>
					<view class="cell">
						<text class="row1">{{storeData.store_name}}</text>
						<text class="row2">{{storeData.age}}年老店{{storeData.is_carry==1?' | 支持配送':''}}</text>
					</view>
				</view>
			</view>
			<view class="status" v-if="msgData.sending || msgData.sendFail">
				<u-icon v-if="msgData.sendFail" color="red" size="44" name="info-circle-fill" @tap="$emit('msgItemTap','IMG_FAIL',msgData)"/>
				<u-loading v-if="msgData.sending" mode="circle" />
			</view>
		</view>

		<view class="msg-container type-store" v-if="msgType=='designer'&&designerData">
			<avatar></avatar>
			<view class="content" @tap="$emit('msgItemTap','DESIGNER',designerData)">
				<view class="shopBox">
					<view class="shopImg">
						<image :src="designerData.avatar.path"></image>
					</view>
					<view class="cell">
						<text class="row1">{{designerData.name}}</text>
						<text class="row2">从业{{ designerData.employ_year }}年 方案{{designerData.case_num}} {{ designerData.start_offer }}-{{ designerData.end_offer }}元/㎡</text>
						<view class="row3">
							<text v-for="t in designerData.design_style">{{ t.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="status" v-if="msgData.sending || msgData.sendFail">
				<u-icon v-if="msgData.sendFail" color="red" size="44" name="info-circle-fill" @tap="$emit('msgItemTap','IMG_FAIL',msgData)"/>
				<u-loading v-if="msgData.sending" mode="circle" />
			</view>
		</view>
		<!-- 系统消息 -->
		<view class="msg-container type-system" v-if="msgType=='system' && systemData">
			<text>{{systemData}}</text>
		</view>
		<!-- 推荐施工队消息 -->
		<view class="msg-container type-team" v-if="msgType=='team'&& teamData">
			<avatar></avatar>
			<view class="content" @tap="$emit('msgItemTap','TEAM',teamData)">
				<view class="shopBox">
					<view class="shopImg">
						<image :src="teamData.avatar.path"></image>
					</view>
					<view class="cell">
						<text class="row1">{{teamData.title}}</text>
						<text class="row2">方案 {{ teamData.case_num }} | 评价 {{ teamData.comment_num }} | {{ teamData.start_offer }}-{{ teamData.end_offer }}万/套均价</text>
						<view class="row3">
							<text v-for="t in teamData.design_style">{{ t.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import avatar from './avatar.vue'
	export default{
		props:['userID','msgData'],
		components: {
			avatar
		},
		data(){
			return{
				screenWidth:0
			}
		},
		computed:{
			msgType(){
				if(this.msgData.type=='TIMImageElem'){
					return 'picture'
				}
				let description = JSON.parse(this.msgData.payload.description) || this.msgData.payload.description;
				return description.format
			},
			listData(){
				if(this.msgType=='list'){
					let description = JSON.parse(this.msgData.payload.description) || this.msgData.payload.description;
					let ary = JSON.parse(this.msgData.payload.data) || [];
					ary.map(item=>{
						item.chat_id=description.chat_id || ''
					})
					return ary
				}else{
					return ''
				}
			},
			answerData(){
				if(this.msgType=='answer'){
					return JSON.parse(this.msgData.payload.data).answer
				}else{
					return ''
				}
			},
			stringData(){
				if(this.msgType=='string'){
					return this.msgData.payload.data
				}else{
					return ''
				}
			},
			pictureData(){
				if(this.msgType=='picture'){
					return this.msgData.payload.imageInfoArray
				}
			},
			goodsData(){
				if(this.msgType=='goods'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			storeData(){
				if(this.msgType=='store'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			caseData(){
				if(this.msgType=='case'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			systemData(){
				if(this.msgType=='system'){
					return this.msgData.payload.data
				}else{
					return ''
				} 
			},
			teamData(){
				if(this.msgType=='team'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			designerData(){
				if(this.msgType=='designer'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			}
		},
		created(){
			const res = uni.getSystemInfoSync();
			this.screenWidth = res.screenWidth;
		},
		methods:{
			imageStyle(item,type){
				let maxWidth = (520/750) * this.screenWidth;
				let imgWidth = item[1].width;
				let imgHeight = item[1].height;
				let resWidth = 0;
				let resHeight = 0;
				if(imgWidth<=maxWidth){
					resWidth = imgWidth;
					resHeight = imgHeight;
				}else{
					resWidth = maxWidth;
					resHeight = (resWidth/imgWidth)*imgHeight
				}
				
				return type=='w'?resWidth + 'px':resHeight + 'px'
			}
		}
	}
</script>

<style lang="scss">
	.msg-item{
		.msg-container{
			display: flex;
			padding: 28rpx;
			.avator{
				width: 72rpx;
				height: 72rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				display: flex;
				flex-wrap: wrap;
				word-break:break-all;
				padding: 16rpx 28rpx;
				background: #FFFFFF;
				border-radius: 0 36rpx 36rpx 36rpx;
				font-size: 28rpx;
				color: #333333;
				margin: 20rpx 0 0 16rpx;
				max-width: 520rpx;
			}
			.status{
				display: flex;
				align-items: center;
				padding-right: 20rpx;
				padding-top: 20rpx;
			}
			&.type-string{}
			&.type-case{
				.content{
					border-radius: 8rpx;
					.caseItem{
						display: flex;
						flex-direction: column;
						.cell_1{
							font-size: 28rpx;
							font-weight: 500;
				            color: #333333;
						}
						.cell_2{
							font-size: 22rpx;
							font-weight: 400;
							line-height: 20rpx;
							color: #A0A0A0;
							padding: 24rpx 0;
							text{
								padding:0 6rpx;
							}
						}
						.cell_3{
							width: 478rpx;
							height: 268rpx;
							image{
								border-radius: 4rpx;
							}
						}
					}
				}
			}
			&.type-goods{
				.content {
					padding: 0;
					border-radius: 0rpx 8rpx 8rpx 8rpx;
				
					.shopBox {
						display: flex;
						padding: 20rpx 0;
						width: 520rpx;
				
						.shopImg {
							width: 160rpx;
							height: 160rpx;
							overflow: hidden;
							margin: 0 24rpx;
				
							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}
				
						.cell {
							flex: 1;
							display: flex;
							justify-content: space-between;
							flex-direction: column;
				
							.row1 {
								font-size: 28rpx;
								font-weight: 400;
								color: #333333;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}
				
							.row2 {
								font-size: 26rpx;
								font-weight: 600;
								color: #DBA954;
							}
						}
					}
				
				}
			}
			&.type-answer{
				.content{
					.answerImg{
						width: 480rpx;
					}
				}
			}
			&.type-list{
				.list-box{
					min-width:350rpx;
					.tit{
						color: #333333;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
					.item{
						font-size: 24rpx;
						color: #939393;
						background: #F8F8F8;
						padding: 20rpx;
						margin-bottom: 20rpx;
					}
				}
			}
			&.type-picture{
				.content{
					padding: 0 !important;
					text{
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}
					// .img{
					// 	width: 468rpx;
					// }
				}
			}
			&.type-store{
				.content {
					padding: 0;
					border-radius: 0rpx 8rpx 8rpx 8rpx;
				
					.shopBox {
						display: flex;
						padding: 20rpx 0;
						width: 520rpx;
						.shopImg {
							width: 92rpx;
							height: 92rpx;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 24rpx;
				
							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}
				
						.cell {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding-right: 20rpx;
							justify-content: space-between;
							.row1 {
								font-size: 28rpx;
								font-weight: 500;
								color: #333333;
							}
				
							.row2 {
								font-size: 20rpx;
								font-weight: 400;
								color: #939393;
							}
							.row3{
								text{
									display: inline-block;
									width: 60rpx;
									height: 18rpx;
									background: #F9F6F3;
									opacity: 1;
									border-radius: 9rpx;
									color: #A98F68;
									font-size: 26rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				
				}
			}
			&.type-system{
				padding: 10rpx 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				justify-content: center;
			}
			&.type-team{
				.content {
					padding: 0;
					border-radius: 0rpx 8rpx 8rpx 8rpx;
				
					.shopBox {
						display: flex;
						padding: 20rpx 0;
				
						.shopImg {
							width: 92rpx;
							height: 92rpx;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 24rpx;
				
							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}
				
						.cell {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding-right: 20rpx;
							.row1 {
								font-size: 28rpx;
								font-weight: 500;
								color: #333333;
							}
				
							.row2 {
								font-size: 20rpx;
								font-weight: 400;
								color: #939393;
								margin: 8rpx 0 36rpx 0;
							}
							
							.row3{
								font-size: 20rpx;
								color: #A98F68;
								text{
									background: #F9F6F3;
									border-radius: 18rpx;
									padding: 4rpx 8rpx;
									margin-right:22rpx;
								}
							}
						}
					}
				
				}
			}
		}
		
		&.self{
			.msg-container{
				flex-direction: row-reverse;
				.content{
					border-radius: 36rpx 0px 36rpx 36rpx;
					margin: 20rpx 16rpx 0 0;
				}
			}
			.type-string{
				.content{
					background: #DEC493;
				}
			}
		}
	}
</style>
